<template>
  <div ref="chartDom" style="width: 1400px; height: 350px;"/>
</template>
<script setup name="saleByDay">
import {saleByDay} from '@/api/system/report.js'
import {ref, onMounted, watch, markRaw} from "vue";
import * as echarts from "echarts";

const {proxy} = getCurrentInstance();
const option = ref(null);
const chartDom = ref(null);
const myChart = ref(null);
const props = defineProps({
  queryParams: {
    time: [],
  },
  style: {
    type: Object,
    default: () => ({
      width: "90%",
      height: "400px",
    }),
  },
});
const resizeHandler = () => {
  myChart.value.resize();
};
onMounted(() => {
  getData()
  myChart.value = markRaw(echarts.init(chartDom.value));
  window.addEventListener("resize", resizeHandler);
});
watch(
    () => props.queryParams,
    (newOptions) => {
      console.log(newOptions)
      getData()
    },
    {
      deep: true,
    }
);

function getData() {
  /*if (!props.queryParams.time.length<2) {
    console.log("加载")
    return
  }*/
  saleByDay({
    'startTime': proxy.parseTime(props.queryParams.time[0], "{y}-{m}-{d}"),
    'endTime': proxy.parseTime(props.queryParams.time[1], "{y}-{m}-{d}")
  }).then(response => {
    console.log(props.queryParams.countType)
    let countType = props.queryParams.countType
    //门店名称
    let legend = Object.keys(response.data)

    let data = [];
    let date = [];
    let total = {
      name: '总' + countType,
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value ;
        }
      },
      data: []
    };
    let totaldata = [];
    let max = 0;
    //日期
    for (let i = 0; i < legend.length; i++) {
      let name = legend[i]
      let arr = response.data[name]
      //时间轴
      if (i === 0) {
        date = arr.map(item => item.days)
      }
      //算每天的总营业额
      for (let j = 0; j < arr.length; j++) {
        if (!totaldata[j]){
          totaldata[j] = 0;
        }
        totaldata[j] = totaldata[j] + (countType == '销售额'?arr[j].price:arr[j].count)
        max = totaldata[j]>max? totaldata[j]:max
      }
      let obj = {
        name: name,
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: arr.map(item => countType == '销售额'?item.price:item.count)
      }
      data.push(obj);
    }
    total.data = totaldata
    data.push(total)

    //数据
    option.value = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data: legend
      },
      xAxis: [
        {
          type: 'category',
          data: date,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          min: 0,
          max: max,
          interval: max/10,
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '总' + countType,
          min: 0,
          max: max,
          interval: max/10,
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: data
    };
    myChart.value.setOption(option.value, true);
  });
}


defineExpose({
  resizeHandler,
});

</script>